<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="Authors" content="Java天下第一">
	<meta name="Robot" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>互动聊天机器人</title>
	<style type="text/css">
		*{margin:0;padding:0;}

		/* 总页面 */
		body{
			background-size: cover;
			font-family: "微软雅黑";
			font-size: 8px;
			color: #666 ;
			margin: 0 auto;

		}



		/*开启主界面的按钮*/
		#big {
			position: fixed;
			display: none;
			width: 50px;
			height: 50px;
			bottom: 100px;
			right: 5px;
			background-color: #5896EF;
		}

		/* 整个聊天窗口 */
		.container{
			width: 1000px;
			height: 700px;
			background: #5896EF;
			margin: 80px auto;
			border: 1px solid black;
		}

		/*header start logo与消息框间的边框*/
		.container .header{
			width: 100px;
			height: 60px;
			background:#5896EF;

			position: relative;
		}

		/* 企业logo */
		.header .logo{
			width: 300px;
			height: 60px;
			position: absolute;
			/* bottom: 460px;  */
		}

		/*缩小按钮  */
		.hide #smaller {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 850px;

		}

		/*退出按钮  */
		.hide #out {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 950px;

		}

		/*header end*/
		/* 问题列表 */
		.container .questions{
			width: 31.5%;
			height: 638px;
			float: right;
			border: 1px solid black;
			/* 设置垂直滚动条显示 */
			overflow-x: hidden;
			overflow-y: scroll;
			scrollbar-arrow-color: rgb(136, 13, 29);
			scrollbar-base-color: rgb(136, 13, 29);
		}

		.questions #question{
			height: 70px;
			/* 设置垂直居中 得和元素高度一致*/
			line-height: 70px;
			border-bottom: 1px solid black ;
			font-size: 18px;
			/* 设置水平居中 */
			text-align:center;
			color: #FFF;
		}



		.questions #question1 {
			height: 70px;
			line-height: 70px;
			border-bottom: 1px solid black ;
			font-size: 18px;
			text-align: right;
			color: #000000;
		}




		/*center start  信息框*/
		.container .center{
			width: 66%;
			height: 500px;
			background: #5896EF;
			border: 1px solid black;
			padding: 10px;
			float: left;
			overflow-x: hidden;
			overflow-y: scroll;
		}
		/* 客服消息框 */
		.center .left{
			width: 100%;
			font-size: 16px;
			color:#000000;
		}
		/* 顾客消息框 */
		.center .right{
			width: 100%;
			font-size: 16px;
			color: #000000;
			text-align: right;
		}
		/* 查看聊天记录 */
		.center .charlist{
			text-align:center;
			top:500px;

		}

		/*center end*/

		/*send start*/
		.container .send{
			float: left;
			width: 68.1%;
			height: 115.5px;
			border: 1px solid black;
		}

		/* 发送信息边框 */
		.send #sendContent{
			width: 100%;
			height: 70px;
			border: none;
			background-color: #5896EF;
			outline: medium;
		}

		.send #prompt{
			position: relative;
			left: 500px;
			bottom: 0px;
		}

		/* 发送按钮的长方形淡蓝色区域 */
		.send .bottom{
			height: 50px;
			cursor: pointer;
		}

		/* 发送按钮 */
		.bottom #button{
			width: 100px;
			float: right;
			border: none;
			background: #33F;
			margin: 5px;
			color: #FFF;
			border-radius: 10px;
			height: 30px;
			outline:none;
			cursor: pointer;
		}
		/*send end*/
	</style>
</head>
<body>
<!-- 实现默认显示主界面-->
<script>
	function a(){
		$("#mainView").show();
	}
</script>
<!-- 当最小化之后的放大窗口按钮 -->
<img id="big" onclick="maxMainView()" title="放大窗口" type="button" src="./images/jimi.png"></img>

<!-- 聊天窗口大框框 -->
<div class="container" id="mainView">
	<!--header start-->
	<div class="header">
		<div class="logo" >
			<img id="pic1" onclick="showLogo()" title="展示企业logo" src="./images/logo.png" width="300px" height="60px" >
		</div>
		<div class="hide">
			<img id="smaller" title="最小化到右下角" onclick="minMainView()" src="./images/smaller.png">
			<img id="out"  title="进入退出界面" onclick="Out()" src="./images/out.png">

		</div>
	</div>
	<!--header end-->

	<!-- center start 聊天信息展示框 要显示出历史聊天信息 -->
	<!--聊天记录  发送人分为客服 和 顾客  问题内容分为默认问题和提的问题 	-->
	<div class="center">
		<div class="charlist" id="chars">
			<button id="getHistoryRecords">查看更多聊天记录</button>
		</div>
	</div>
	<!--center end-->
	<div class="questions" id="questions">
		<div id="question" >常见问题</div>
		<ul>
		</ul>
	</div>
	<!-- </div> -->
	<!--send start 消息编辑框-->
	<div class="send">
		<textarea type="text" id="sendContent"  rows="3"  placeholder="请在此输入问题，输入字数不超过100个字符"></textarea>
<!--		<textarea id="message" class="form-control" rows="4" cols="30" name="messages"-->
<!--				  placeholder=请在此输入问题，字数不超过100字></textarea>-->
		<div class="bottom">
			<span id="prompt">按Enter键发送</span>
			<button id="button">发送</button>
		</div>
	</div>
	<!--send start-->
</div>


<script type="text/javascript" src="js/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
	//聊天信息的处理(打开窗口就执行的事件)
	$(function() {
		// 设置左边的客服默认首句回复
		var htmll = "<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>您好，欢迎访问我司网站，请问有什么可以帮您的吗？</span></div>"
		$(".center").append(htmll);
		//查询默认问题列表
		queryDefaultQuestions();
		//自动加载企业logo
		showLogo();
		//获取已存在数据库里最大的消息id
		$.getJSON("http://47.111.69.237:8092/chat/getHistoryRecords/1?pageNum=1&pageSize=5", function (rs) {
			var chat = rs.data.list[0];
			console.log(chat.chatId);
			//获取查询前到最大id
			chatId = chat.chatId + 1;
		})
	});

	//展示logo
	function showLogo() {
		$.ajax({
			url: "http://47.111.69.237:8092/enterprice/getLogo/1",
			type: "GET",
			success: function (res) {
				if (res.success){
					//alert(res.data.logo);
					$("#pic1").attr('src',"http://47.111.69.237:8092" + res.data.logo);
					alert("成功刷新logo");
				}
			}
		})
	}


	//查询默认问题的方法
	function queryDefaultQuestions() {
		$.ajax({
			url: "http://47.111.69.237:8092/chat/queryDefaultQuestions",
			type: "GET",
			success: function(res){
				console.log(res)
				if (res.success){
					var quests = res.data;
					var liHtml = "";
					for (const quest of quests){
						liHtml += '<li id="question1" '+quest.id+' onclick="sq('+quest.id+')" >'+quest.questionName+'</li>'
					}
					$("#question").append(liHtml);
				}else {
					alert(res.msg);
				}
			}
		})
	};


	// 实现点击默认问题  自动转换为聊天内容 并回复 的方法
	function sq (id) {
		$.ajax({
			url: "http://47.111.69.237:8092/chat/sendmessage/" + id + "/0/0/1",
			type: "POST",
			success: function (res) {
				if (res.success) {
					// debugger;
					var messageList = res.data;
					//生成客户信息框
					var center2 = $(".center");
					var htmlr2 = "";
					htmlr2 += "<div class='right'><span class='msg'>" + messageList.questionName + "</span><img src='./images/job.jpg' width='50' height='50'></div>"
					//将客户发送消息以<div>标签形式追加到 center聊天信息展示框
					center2.append(htmlr2);
					$("#sendContent").val("");
					//生成
					var htmll = "<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>" + messageList.answer + "</span></div>"
					center2.append(htmll);
					center2.scrollTop(center2[0].scrollHeight);
				}
			}
		})
	};


	//实现查询历史消息的功能
	// 默认当前页
	var pageNum=1;
	//查询历史页面上最小消息id
	var chatId=9999999;
	$("#getHistoryRecords").click(function () {
		console.log("获取到chatId："+chatId);
		$.ajax({
			url:"http://47.111.69.237:8092/chat/getHistoryRecords/1?pageNum="+pageNum+"&pageSize=10&chatId="+chatId,
			type: "GET",
			success: function (res) {
				var charlist = $(".charlist");
				if (res.success){
					var chats = res.data.list;
					for (const chat of chats) {
						var htmlr = "";
						if (chat.sender == 0){
							//生成客服消息
							htmlr ="<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>" + chat.chatInfo + "</span></div>"
						}else{
							//生成右边客户发送消息html
							htmlr ="<div class='right'><span class='msg'>" + chat.chatInfo + "</span><img src='./images/job.jpg' width='50' height='50'></div>"
						}
						$("#chars").after(htmlr);
					}
				}
			}
		})
		//每次点击页面+1
		pageNum=pageNum+1;
	});



	// 点击发送按钮后发生的事件(非默认问题)
	$("#button").click(function () {
		var message = "";
		message = $("#sendContent").val();
		if (message.length <= 100 && message != "") {
			$.ajax({
				url: "http://47.111.69.237:8092/chat/sendmessage/0/1/" + message + "/1",
				type: "POST",
				success: function (rs) {
					var center = $(".center");
					//生成右边客户发送消息html
					var htmlr = "<div class='right'><span class='msg'>" + message + "</span><img src='./images/job.jpg' width='50' height='50'></div>"
					//将客户发送消息以<div>标签形式追加到 center聊天信息展示框
					center.append(htmlr);
					$("#sendContent").val("");

					//生成客服消息
					var htmll = "<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>" + rs.data.answer + "</span></div>"
					center.append(htmll);
					center.scrollTop(center[0].scrollHeight);
				}
			})
		} else {
			alert("输⼊入字数不能为空或超过100个字符");
		}
	});


	//显示主界面
	function maxMainView(){
		$("#mainView").show();
		$("#big").hide();
	};

	//最小化主界面
	function minMainView(){
		$("#mainView").hide();
		$("#big").show();
	};

	//退出主界面
	function Out(){
		alert("您即将离开会话，期待和您的下次见面");
		window.location.replace("out.html");
	};

	//回车发送信息(因为enter的键码是13，故我们只需接触按键是否值为13,就可以实现enter键发送)
	window.onkeydown=function(e){
		var key = e.keyCode;
		if (key == 13) {
			$("#button").click();
		}
	};


</script>
</body>
</html>
